<template>
	<kb-layout title="卡套餐">
	
		<view class="bg-white ">
		
		 
		 <view class="u-padding-left-30 u-padding-right-30">
		 	<view class="u-margin-top-30">
		 		<up-subsection :list="['年卡','次卡' ]" font-size="16px"
		 		 @change="i=>{navIndex=i; clearResult();fetchData()}"
		 		:current="navIndex"></up-subsection>
		 	</view>
		 </view>
		
		<view class="search u-padding-30">
			<up-search v-model="keyword" :clearabled="true" actionText="搜索" :showAction="true"
				height="30" searchIconSize="22" @custom="onKeyword" @search="onKeyword"
				:animation="true"></up-search>
		</view>
			
			<up-alert v-if="isempty" :center="true" type="warning" description="没有找到相关门票/年卡,换个搜索条件试试"></up-alert>
			
			
			<view class="u-padding-30 u-flex u-flex-wrap u-flex-between" >
					
				<view class="good-grid" v-for="(item,index) in cardList"  :key="index" >
					<suggestGoodItem :good="item"></suggestGoodItem>
				</view>		 
							 
			<!-- 推荐商品end -->
			</view>
			
			<up-empty v-if="isempty" mode="shop" text="暂无数据" icon="/static/empty/nodata.png"> </up-empty>
			  
			<view v-if="(!isempty && nomore)" class="findmore"> 已经到底线了</view>
			 
			
		</view>
		<!-- <kb-footer :color="ee.bgColor.weight"></kb-footer>	 -->
	</kb-layout>
</template>

<script>
	import { getGoodSearchList } from '../../common/api';
	import suggestGoodItem from "../mall/componets/good-grid-item.vue"; 
	export default {
		components:{
			suggestGoodItem 
			 
		},
		data() {
			return {
				keyword:"",
				cardList:[],
				navIndex:0,
				page:1,
				pagesize:10,  
				total:0,
				shotips: undefined,
				nomore:true,
			}
		},
		computed:{
			isempty(){
				return  this.total==0;
			} 
		},
		onLoad() {
			this.fetchData();
		},
		methods: {
			onKeyword(){
				this.clearResult()
				this.fetchData()
			},
			clearResult(){
				this.cardList = [];
				this.page=1;
				this.total = 0;
			},
			fetchData( ){
			 
				uni.showLoading({title: 'Loading...'});	
				const params = {  page: this.page ,type: this.navIndex ,keyword:this.keyword , limit: this.pagesize};
				getGoodSearchList(params)  .then( (ret) => {
						  
						if(ret.data.length>0){								 
							this.page = this.page +1;							
							this.total = ret.total;					
							this.cardList = this.cardList.concat(ret.data);
						}  
						uni.hideLoading();
						
					}
				)  
			}
		},
		onReachBottom() {
			if(this.total  && this.total < this.page * this.pagesize) 
				this.nomore = true;
			else
			   this.total >1 &&  this.fetchData();
			
			this.shotips = false;	
			return true;
			 
		},
	}
</script>

<style lang="scss" scoped>
	page{
	  background-color: #fff;
	}
.bg-white{
	background-color: #fff;
	min-height: calc(100vh - 200px);
}
.good-grid{
	width: 46.9%;
	min-height: 200px;
	background-color: #EFEFF4;
	border-radius: 5px;
	margin-bottom: 15px;
}
</style>
